<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="status-bar"></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="nav-title">美天送餐</view>
				<view class="nav-right">
					<text class="more-icon">⋯</text>
					<text class="dash-icon">—</text>
					<text class="target-icon">◎</text>
				</view>
			</view>
		</view>

		<!-- 主选项卡 -->
		<view class="tab-section">
			<view class="tab-container">
				<view 
					class="tab-item" 
					:class="{ active: currentTab === 'delivery' }"
					@click="switchTab('delivery')"
				>
					<text class="tab-text">外卖收藏</text>
					<view class="tab-line" v-if="currentTab === 'delivery'"></view>
				</view>
				<view 
					class="tab-item" 
					:class="{ active: currentTab === 'mall' }"
					@click="switchTab('mall')"
				>
					<text class="tab-text">商城收藏</text>
					<view class="tab-line" v-if="currentTab === 'mall'"></view>
				</view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-bar">
				<text class="search-icon">🔍</text>
				<input 
					type="text" 
					class="search-input" 
					placeholder="商品名称" 
					v-model="searchKeyword"
				/>
			</view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-section">
			<view class="filter-container">
				<view 
					class="filter-item" 
					:class="{ active: currentFilter === 'all' }"
					@click="switchFilter('all')"
				>
					<text class="filter-text">全部</text>
					<view class="filter-line" v-if="currentFilter === 'all'"></view>
				</view>
				<view 
					class="filter-item" 
					:class="{ active: currentFilter === 'purchased' }"
					@click="switchFilter('purchased')"
				>
					<text class="filter-text">已买过</text>
					<view class="filter-line" v-if="currentFilter === 'purchased'"></view>
				</view>
				<view 
					class="filter-item manage-item" 
					:class="{ active: manageMode }"
					@click="enterManageMode"
				>
					<text class="filter-text">{{ manageMode ? '完成' : '管理' }}</text>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-section">
			<!-- 收藏列表 -->
			<view class="collection-list" v-if="filteredCollections.length > 0">
				<view 
					class="collection-item" 
					v-for="(item, index) in filteredCollections" 
					:key="index"
					@click="handleItemClick(item)"
				>
					<!-- 选择框 -->
					<view class="checkbox-wrapper" v-if="manageMode">
						<view 
							class="checkbox" 
							:class="{ checked: selectedItems.includes(item.id) }"
							@click.stop="toggleSelect(item.id)"
						>
							<text class="check-icon" v-if="selectedItems.includes(item.id)">✓</text>
						</view>
					</view>
					
					<view class="item-image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="item-info">
						<view class="item-title">{{ item.title }}</view>
						<view class="item-desc">{{ item.description }}</view>
						<view class="item-price">
							<text class="price-symbol">¥</text>
							<text class="price-value">{{ item.price }}</text>
						</view>
					</view>
					<view class="item-status" v-if="item.purchased">
						<text class="status-text">已买过</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-else>
				<view class="empty-icon">
					<text class="icon-text">📄</text>
					<text class="icon-magnifier">🔍</text>
					<text class="icon-plus">+</text>
					<text class="icon-circle">o</text>
					<text class="icon-dash">-</text>
				</view>
				<text class="empty-text">暂无收藏</text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar" v-if="manageMode">
			<view class="select-info">
				<text class="select-text">已选择 {{ selectedItems.length }} 项</text>
			</view>
			<view class="action-buttons">
				<button 
					class="select-all-btn" 
					@click="selectAll"
				>
					{{ isAllSelected ? '取消全选' : '全选' }}
				</button>
				<button 
					class="delete-btn" 
					:class="{ disabled: selectedItems.length === 0 }"
					@click="deleteSelected"
				>
					删除
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			currentTab: 'delivery', // delivery: 外卖收藏, mall: 商城收藏
			currentFilter: 'all',   // all: 全部, purchased: 已买过
			searchKeyword: '',
			manageMode: false,
			selectedItems: [], // 选中的项目ID数组
			collections: {
				delivery: [
					{
						id: 1,
						title: '香辣鸡腿堡套餐',
						description: '包含香辣鸡腿堡、薯条、可乐',
						price: '25.8',
						image: '/static/logo.png',
						purchased: true
					},
					{
						id: 2,
						title: '麻辣香锅',
						description: '新鲜蔬菜配麻辣调料',
						price: '38.0',
						image: '/static/logo.png',
						purchased: false
					}
				],
				mall: [
					{
						id: 3,
						title: '苹果iPhone 15',
						description: '最新款智能手机',
						price: '5999',
						image: '/static/logo.png',
						purchased: true
					}
				]
			}
		}
	},
	computed: {
		filteredCollections() {
			let list = this.collections[this.currentTab] || [];
			
			// 按筛选条件过滤
			if (this.currentFilter === 'purchased') {
				list = list.filter(item => item.purchased);
			}
			
			// 按搜索关键词过滤
			if (this.searchKeyword) {
				list = list.filter(item => 
					item.title.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
					item.description.toLowerCase().includes(this.searchKeyword.toLowerCase())
				);
			}
			
			return list;
		},
		isAllSelected() {
			if (this.filteredCollections.length === 0) return false;
			// 只检查当前过滤后的列表中的项目是否都被选中
			return this.filteredCollections.every(item => this.selectedItems.includes(item.id));
		}
	},
	onLoad() {
		this.getCollections();
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 切换主选项卡
		switchTab(tab) {
			this.currentTab = tab;
			this.currentFilter = 'all';
			this.searchKeyword = '';
			this.exitManageMode(); // 切换tab时退出管理模式
		},
		
		// 切换筛选条件
		switchFilter(filter) {
			this.currentFilter = filter;
			// 切换筛选时清理选中状态，避免选中不可见的项目
			if (this.manageMode) {
				this.clearSelection();
			}
		},
		
		// 搜索处理
		
		// 进入/退出管理模式
		enterManageMode() {
			this.manageMode = !this.manageMode;
			if (!this.manageMode) {
				this.clearSelection(); // 退出管理模式时清理选中状态
			}
		},
		
		// 退出管理模式
		exitManageMode() {
			this.manageMode = false;
			this.clearSelection();
		},
		
		// 新增：清理选中状态的方法
		clearSelection() {
			this.selectedItems = [];
		},
		
		// 处理项目点击
		handleItemClick(item) {
			if (this.manageMode) {
				this.toggleSelect(item.id);
			} else {
				this.viewDetail(item);
			}
		},
		
		// 切换选择状态
		toggleSelect(itemId) {
			const index = this.selectedItems.indexOf(itemId);
			if (index > -1) {
				this.selectedItems.splice(index, 1);
			} else {
				this.selectedItems.push(itemId);
			}
		},
		
		// 全选/取消全选
		selectAll() {
			if (this.isAllSelected) {
				// 取消全选：只移除当前过滤列表中的项目
				const currentIds = this.filteredCollections.map(item => item.id);
				this.selectedItems = this.selectedItems.filter(id => !currentIds.includes(id));
			} else {
				// 全选：只添加当前过滤列表中未选中的项目
				const currentIds = this.filteredCollections.map(item => item.id);
				const newSelections = currentIds.filter(id => !this.selectedItems.includes(id));
				this.selectedItems.push(...newSelections);
			}
		},
		
		// 删除选中的项目
		async deleteSelected() {
			if (this.selectedItems.length === 0) {
				uni.showToast({
					title: '请选择要删除的项目',
					icon: 'none'
				});
				return;
			}
			
			uni.showModal({
				title: '确认删除',
				content: `确定要删除选中的 ${this.selectedItems.length} 个收藏吗？`,
				success: async (res) => {
					if (res.confirm) {
						await this.deleteCollections();
					}
				}
			});
		},
		
		// 调用删除API
		async deleteCollections() {
			try {
				uni.showLoading({
					title: '删除中...'
				});
				
				// 预留API调用
				// const response = await this.$api.deleteCollections({
				//     ids: this.selectedItems,
				//     type: this.currentTab
				// });
				
				// 模拟API调用延迟
				await new Promise(resolve => setTimeout(resolve, 1000));
				
				// 模拟删除成功
				this.collections[this.currentTab] = this.collections[this.currentTab].filter(
					item => !this.selectedItems.includes(item.id)
				);
				
				uni.hideLoading();
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				});
				
				// 退出管理模式
				this.exitManageMode();
				
			} catch (error) {
				uni.hideLoading();
				uni.showToast({
					title: '删除失败，请重试',
					icon: 'none'
				});
				console.error('删除收藏失败:', error);
			}
		},
		
		// 查看详情
		viewDetail(item) {
			uni.showToast({
				title: `查看${item.title}详情`,
				icon: 'none'
			});
			// 这里可以跳转到商品详情页
			// uni.navigateTo({
			//     url: `/pages/productDetail/productDetail?id=${item.id}`
			// });
		},
		
		// 获取收藏数据
		async getCollections() {
			try {
				// 这里可以调用API获取真实数据
				// const response = await this.$api.getCollections()
				// this.collections = response.data
			} catch (error) {
				console.error('获取收藏失败:', error);
			}
		}
		}
	}
</script>

<style lang="scss">
.container {
	background: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx; // 为底部操作栏留出空间
}

/* 导航栏 */
.nav-bar {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	position: relative;
}

.status-bar {
	height: calc(var(--status-bar-height, 0) + 20rpx);
	background: transparent;
}

.nav-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
}

.nav-left, .nav-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.back-icon {
	font-size: 48rpx;
	color: white;
	font-weight: bold;
}

.nav-title {
	font-size: 36rpx;
	font-weight: 700;
	color: white;
}

.nav-right {
	gap: 15rpx;
}

.more-icon, .dash-icon, .target-icon {
	font-size: 32rpx;
	color: white;
}

/* 主选项卡 */
.tab-section {
	background: white;
	border-bottom: 1rpx solid #f0f0f0;
}

.tab-container {
	display: flex;
	padding: 0 30rpx;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30rpx 0;
	position: relative;
}

.tab-text {
	font-size: 32rpx;
	color: #999;
	font-weight: 500;
	transition: all 0.3s ease;
}

.tab-item.active .tab-text {
	color: #007AFF;
	font-weight: 600;
}

.tab-line {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background: #007AFF;
	border-radius: 2rpx;
}

/* 搜索栏 */
.search-section {
	background: #fff;
	padding: 20rpx 30rpx 0 30rpx;
}

.search-bar {
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-radius: 16rpx;
	padding: 0 20rpx;
}

.search-icon {
	font-size: 32rpx;
	color: #bbb;
	margin-right: 10rpx;
}

.search-input {
	flex: 1;
	height: 60rpx;
	border: none;
	background: transparent;
	font-size: 30rpx;
}

/* 筛选栏 */
.filter-section {
	background: #fff;
	padding: 0 30rpx;
}

.filter-container {
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #f0f0f0;
}

.filter-item {
	padding: 30rpx 0;
	margin-right: 40rpx;
	position: relative;
}

.filter-item:last-child {
	margin-right: 0;
	margin-left: auto;
}

.filter-text {
	font-size: 30rpx;
	color: #666;
}

.filter-item.active .filter-text {
	color: #007AFF;
	font-weight: 600;
}

.filter-line {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background: #007AFF;
	border-radius: 2rpx;
}

.manage-item .filter-text {
	color: #333;
}

/* 内容区域 */
.content-section {
	flex: 1;
	background: #fff;
}

.collection-list {
	padding: 30rpx;
}

.collection-item {
	display: flex;
	align-items: center;
	background: #f8f8f8;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
	position: relative;
}

/* 选择框样式 */
.checkbox-wrapper {
	margin-right: 20rpx;
}

.checkbox {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #ddd;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
}

.checkbox.checked {
	background: #007AFF;
	border-color: #007AFF;
}

.check-icon {
	color: white;
	font-size: 24rpx;
	font-weight: bold;
}

.item-image image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 12rpx;
}

.item-info {
	flex: 1;
	margin-left: 20rpx;
}

.item-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
}

.item-desc {
	font-size: 26rpx;
	color: #999;
	margin-top: 8rpx;
}

.item-price {
	margin-top: 10rpx;
}

.price-symbol {
	font-size: 24rpx;
	color: #ff6600;
}

.price-value {
	font-size: 32rpx;
	color: #ff6600;
	font-weight: bold;
}

.item-status .status-text {
	font-size: 24rpx;
	color: #007AFF;
	border: 1rpx solid #007AFF;
	border-radius: 8rpx;
	padding: 2rpx 10rpx;
	margin-left: 10rpx;
}

/* 底部操作栏 */
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	border-top: 1rpx solid #f0f0f0;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 1000;
}

.select-info {
	flex: 1;
}

.select-text {
	font-size: 28rpx;
	color: #666;
}

.action-buttons {
	display: flex;
	gap: 20rpx;
}

.select-all-btn, .delete-btn {
	padding: 16rpx 30rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	border: none;
}

.select-all-btn {
	background: #f5f5f5;
	color: #666;
}

.delete-btn {
	background: #ff4757;
	color: white;
}

.delete-btn.disabled {
	background: #ccc;
	color: #999;
}

/* 空状态 */
.empty-state {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 60rpx;
	background: white;
}

.empty-icon {
	position: relative;
	margin-bottom: 40rpx;
}

.icon-text {
	font-size: 120rpx;
	color: #ccc;
	display: block;
	transform: rotate(-5deg);
}

.icon-magnifier {
	position: absolute;
	bottom: 20rpx;
	right: 20rpx;
	font-size: 40rpx;
	color: #999;
}

.icon-plus {
	position: absolute;
	top: 10rpx;
	left: 10rpx;
	font-size: 24rpx;
	color: #999;
	font-weight: bold;
}

.icon-circle {
	position: absolute;
	top: 30rpx;
	right: 10rpx;
	font-size: 20rpx;
	color: #999;
}

.icon-dash {
	position: absolute;
	bottom: 10rpx;
	left: 30rpx;
	font-size: 20rpx;
	color: #999;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	font-weight: 500;
}
</style>
